import React, { useRef, useEffect } from 'react';
import { Form, Input, InputNumber, Modal, Select, DatePicker } from 'antd';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
      md: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };

  useEffect(() => {
    getForm(form);
  }, []);

  return (
    <Modal
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      title={'编辑'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form hideRequiredMark style={{ marginTop: 8 }} form={form} name="basic">
        <FormItem
          rules={[{ required: true, message: '请输入文件名' }]}
          {...formItemLayout}
          label={'文件名'}
          name="displayName"
        >
          <Input />
        </FormItem>
      </Form>
    </Modal>
  );
};
export default Detail;
